<template>
    <div>
      <img src="http://www.itcast.cn/2018czydz/images/gywmban.jpg" alt="">
      <van-tabs v-model="active">
        <van-tab title="黑马概况">
          <p class="hmgk">黑马程序员是传智播客旗下高端IT教育品牌，2010年，黑马程序员在北京中关村软件园开设第一个Andr…武汉、郑州、西安、长沙、济南、重庆、南京、杭州、成都、石家庄、合肥、太原、厦门、沈阳、天津等城市。</p>
        </van-tab>
        <van-tab title="品牌理念">
          <div style='padding: 10px;'><h2 style='font-size:14px; text-align:center'>【黑马程序员的使命】</h2><p>“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、开放和协作，努力打造高质量的IT人才服务平台。</p><img style='width:100%' src='http://www.itcast.cn/2018czydz/images/gywmpic.jpg'><h2 style='font-size:14px; text-align:center'>【黑马程序员的价值观】</h2><p>务实、质量、创新、分享、专注、责任。</p><h2 style='font-size:14px; text-align:center'>【黑马程序员的精神】</h2><p>爱岗敬业、为人师表、诚实守信、团结友善、勇于担当、乐于奉献。</p></div>
        </van-tab>
      </van-tabs>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        联系电话
      </van-divider>
      <div  style="margin-left: 15px;">
        <span >电话：</span>
        <a href="tel:400-618-9090">400-618-9090</a>
      </div>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        校区位置
      </van-divider>
      <div class="amap-wrap">
        <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :plugin="plugin">
          <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
        </el-amap>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      zoom: 15, // 设置初始化级别
      center: [120.363172, 30.312212],
      label: {
        content: '黑马',
        offset: [10, 12]
      },
      plugin: [{ pName:'Scale'}, {
          pName: 'ToolBar',//工具条插件
          position:'LB',
        }]
    }
  },

  created() {
  //  this.getInfo()
  },

  methods: {
    // 获取黑马概念和品牌理念
     async getInfo(){
      const {data:res}=await this.$axios.get('http://localhost:8080//heima.json')
     
    }
  }
};
</script>

<style scoped lang='less'>
  img{
      width: 100%;
  }
  .amap-wrap{
    height: 300px;
    margin-bottom: 20px;
  }
  /deep/.amap-container{
    z-index: 0
  }
  .hmgk{
    padding: 5px 10px;
    text-indent: 2em;
    line-height: 24px;
  }
</style>
